<template>
  1
  <div class="p-6px">
    <el-card class="rounded-md" shadow="never">
      <el-form ref="formRef" label-width="120px" :model="form" status-icon>
        <el-form-item label="销售属性" prop="open">
          <div class="mb-[10px] bg-[#fafafa] p-[8px] max-w-[1000px]" v-for="(item, index) in skuAttributes">
            <div class="flex items-center relative">
              <el-popconfirm title="确定删除吗?" @confirm="deleteSkuAttr(index)" placement="right">
                <a-button class="absolute top-[5px] right-[5px]" type="text">删除</a-button>
              </el-popconfirm>
              <div class="w-[60px] text-right">属性名称:</div>
              <el-input class="ml-5 w-[130px]" v-model:value="item.title" placeholder="请输入属性名称"></el-input>
            </div>
            <div class="flex items-start mt-10">
              <div class="w-[60px] text-right leading-[32px]">属性值:</div>
              <div class="ml-5 relative sku_item" v-for="(text, cindex) in item.values">
                <a class="sku_item_delete absolute top-[-4px] right-[4px] z-50" @click="deleteSkuAttrName(index, cindex)">删除</a>
                <div class="flex flex-col items-center mr-[10px]">
                  <el-input
                    placeholder="请输入属性值"
                    class="w-[130px]"
                    v-model:value="text.attributeValue"
                  ></el-input>
                  <div
                    v-if="item.isAddImage"
                    class="relative w-[100px] h-[100px] border-solid border-[#eee] border-[1px] mt-[10px] cursor-pointer flex justify-center items-center bg-white"
                    @click="addSkuAttrImage(index, cindex)"
                  >
                  </div>
                </div>
              </div>
              <el-button :disabled="item.values.length >= 5" type="text" @click="addSkuAttrName(index)">
                增加字段
              </el-button>
            </div>
          </div>
          <el-button type="primary" ghost @click="addSkuAttr">增加销售属性</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" plain v-debounce="">保存</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const formRef = ref(null)
//销售属性
let skuAttributes = ref([
  {
    title: "尺码",
    values: [
      { attributeValue: "S" },
      { attributeValue: "M" }
    ]
  },
  {
    title: "颜色分类",
    values: [
      { attributeValue: "白色" },
      { attributeValue: "黑色" }
    ]
  }
]);
const deleteSkuAttrName = (index: number, cindex: number) => {

};
const addSkuAttrName = (index: number, cindex: number) => {

};
const addSkuAttrImage = (index: number, cindex: number) => {

};
const addSkuAttr = () => {

};
const deleteSkuAttr = (index: number) => {

};
</script>
<style lang="scss" scoped>
.sku_item {
  &:hover {
    .sku_item_delete {
      opacity: 1;
    }
  }

  .sku_item_delete {
    opacity: 0;
  }
}
</style>
